<template>
<div style="position: relative;">
  <transition name="">
    <div v-if="showType == 'list'">
      <TableList :status="activeName" ref="table" :statusList="statusList" :typeList="typeList" @onAdd="onAdd" @onEdit="onEdit" @onShow="onShow"></TableList>
    </div>
  </transition>
  <transition name="">
    <div v-if="showType == 'form'">
      <DetailForm :serverTargetList="serverTargetList" :typeList="typeList" @goBack="showType = 'list'" :initForm="editData" :formStatus="formStatus"></DetailForm>
    </div>
  </transition>
  <!-- <el-tabs v-model="activeName" @tab-click="handleClick" class="infoTabStyle">
    <el-tab-pane :label="item.label" :name="item.status" v-for="(item,index) in statusList"></el-tab-pane>
  </el-tabs> -->

</div>
</template>
<script>
import {
  DictionaryController
} from '@/api';
import TableList from './table/index.vue'
import DetailForm from './form/index.vue'
export default {
  name: "volunActivies",
  components: {
    TableList,
    DetailForm
  },
  data() {
    return {
      activeName: '-1',
      statusList: [{
        label: "全部",
        status: "-1"
      }, {
        label: "草稿",
        status: "0"
      }, {
        label: "已发布",
        status: "1"
      }, {
        label: "已下线",
        status: "2"
      }],
      serverTargetList: [],
      typeList: [],
      showType: "list",
      editData: {},
      formStatus: 'add'
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.init();
  },
  methods: {
    init() {
      let me = this;
      me.getDicData("ProjectType", (data) => {
        me.typeList = data;
      })
      me.getDicData("ServerTarget", (data) => {
        me.serverTargetList = data;
      })
    },
    getDicData(code, callBack) {
      let params = {};
      params.dictCode = code;
      DictionaryController.dictGlobalDict(this, params).then(res => {
        callBack(res.getList())
      })
    },
    onAdd() {
      this.showType = "form";
      this.formStatus = 'add';
    },
    onEdit(event) {
      this.showType = "form";
      this.editData = event;
      this.formStatus = 'edit';
    },
    onShow(event) {
      this.showType = "form";
      this.editData = event;
      this.formStatus = 'show'
    },
  }
}
</script>
<style lang="scss" scoped>
.infoTabStyle {
    background-color: white;
    padding: 0 20px;
}
</style>
